<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-10 09:31:52
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-01-06 11:03:45
 * @FilePath: \hbzc-groupmeal-restaurant-web\src\Public-UIlibrary\pb-alert\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
  import { ref, watch, nextTick, computed, withDefaults, defineProps } from "vue"
  import type { AlertProps } from "./type";
  import { getLastBottomOffset, getLastInstance } from "./method";
  import variables from "@/styles/variables.module.scss";
  const visible = ref(false)
  const height = ref(0)
  const alertRef = ref < HTMLDivElement > ()
  const props = withDefaults(defineProps < AlertProps > (), {
    duration: 3000,
    type: 'error',
    alert: '这是一个提示',
    offset: 20
  })
  // 获取上一个组件
  const prev = getLastInstance()
  // 上一个实例的最下面的坐标数字
  const lastOffset = computed(() =>
    getLastBottomOffset(props.id!)
  )
  // 获取该元素的top计算值
  const topOffset = computed(() => {
    return lastOffset.value + props.offset
  })
  // 该元素为下一个元素预留的底部空间
  const bottomOffset = computed(() => height.value + topOffset.value)
  // 定义样式
  const cssStyle = computed(() => {
    return {
      top: topOffset.value + 'px'
    }

  })
  const startTimer = () => {
    if (props.duration == 0) return
    setTimeout(() => {
      visible.value = false
    }, props.duration)
  }
  watch(visible, (newValue) => {
    if (!newValue) {
      console.log(props);

      props.onDestroy()
    }
  })

  const iconList = reactive(
    [
      { type: 'info', name: 'information-solid', color: 'primary-color' },
      { type: 'qustion', name: 'qustion', color: 'primary-color' },
      { type: 'success', name: 'success', color: 'success-color' },
      { type: 'warning', name: 'warning', color: 'warning-color' },
      { type: 'error', name: 'warning', color: 'danger-color' },
      { type: 'loading', name: 'loading', color: 'primary-color' },
    ]
  )
  const curIcon = computed(() => {
    const curItem = iconList.findIndex(el => el.type == props.type)
    return iconList[curItem]
  })
  onMounted(async () => {
    visible.value = true
    await nextTick(() => {
      console.log(alertRef);
      height.value = alertRef.value!.getBoundingClientRect().height
    })



    startTimer()
  })

  defineExpose({
    bottomOffset
  })
</script>

<template>
  <div class="alert-box" ref="alertRef" :class="`pd-alert--${type}`" :style="cssStyle" v-show="visible">
    <pb-icon :name="curIcon.name" :color="variables[curIcon.color]" size="20" class="mr-2">
    </pb-icon>
    <div class="alert_content">
      <span>{{ alert }} </span>
    </div>
    <div class="alert-operation" v-if="showOperation">
      点击跳转
    </div>
    <div class="alert-close" @click="visible = false" v-if="showClose">
      {{ closeType == 'noLong' ? '不再提醒' : '关闭' }}
    </div>

  </div>
</template>

<style scoped>
  @import './style.scss'
</style>